<template>
  <div class="quality-management-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="table-container container">
        <div class="search-container">
          <div class="search-content">
            <el-select v-model="floor" placeholder="请选择楼层">
              <el-option
                v-for="(item, index) in floorList"
                :value="item.title"
                :key="index"
                :label="item.title">
              </el-option>
            </el-select>
            <div class="search-item">
              <label>桩号：</label>
              <el-input v-model="stake" placeholder="请输入桩号"></el-input>
            </div>
            <div class="search-btn">
              <el-button type="primary" @click="handleSearch">
                <i class="el-icon-search"></i>
              </el-button>
              <el-button type="primary" @click="handleRefresh">
                <i class="el-icon-refresh"></i>
              </el-button>
            </div>
          </div>
        </div>
        <el-table
          class="table-content"
          v-loading="tableLoading"
          element-loading-custom-class="custom-load"
          :data="tableData"
          row-key="id">
          <el-table-column prop="created" label="时间">
            <template slot-scope="scope">
              {{ scope.row.created ? $moment(scope.row.created).format('yyyy-MM-DD HH:mm:ss') : ''}}
            </template>
          </el-table-column>
          <el-table-column prop="location" label="位置"></el-table-column>
          <el-table-column prop="pileNumber" label="桩号"></el-table-column>
          <el-table-column prop="isClosed" label="状态">
            <template slot-scope="scope">
              {{ setCurrentData(scope.row).status }}
            </template>
          </el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <el-image
                class="table-img"
                lazy
                :src="setCurrentData(scope.row).imgUrl"
                :preview-src-list="setCurrentData(scope.row).imgList">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <i class="iconfont iconchakan" @click="handleLook(scope.row)"></i>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
        <el-pagination
          v-if="total > 10"
          :page-size="pageSize"
          :current-page="pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <div class="echarts-container container">
        <div class="echarts-top">
          <div class="echarts-item complete">
            <echarts-base :options="typeOptions"></echarts-base>
          </div>
          <div class="echarts-item">
            <echarts-base :options="rectificationOptions"></echarts-base>
          </div>
        </div>
        <div class="echarts-bottom"></div>
      </div>
      <step-modal
        :visible="visible"
        :options="stepData"
        @cancel="visible = false">
      </step-modal>
    </main>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';
import echartsBase from '@/components/echarts/base';
import stepModal from '@/components/project/quality/stepModal';

export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: '质量管理',
        },
        {
          name: '智慧化质量管理'
        }
      ],
      floor: '',
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      stake: '',
      hasSearch: false,
      // 楼层
      floorList: [],
      // 计桩号完成情况
      stakeStatisData: {},
      // 计桩号完成情况
      stakeStepStatisData: [],
      // 步骤弹框
      visible: false,
      // 步骤条数据
      stepData: {}
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    typeOptions() {
      const nameOptions = {
        finlishNum: '完成',
        unFinlishNum: '未完成'
      };
      return {
        textStyle: {
          color: '#fff'
        },
        legend: {
          data: ['完成', '未完成'],
          bottom: 10,
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            radius: '55%',
            label: {
              formatter: '{b}: {d}%'
            },
            data: Object.keys(this.stakeStatisData).map((key, index) => {
              return {
                value: this.stakeStatisData[key],
                name: nameOptions[key],
                itemStyle: {
                  color: index === 0
                    ? 'rgb(85, 201, 246)'
                    : 'rgba(226, 145, 184, 1)'
                }
              };
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    },
    rectificationOptions() {
      return {
        textStyle: {
          color: '#fff'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.stakeStepStatisData.map(item => item.pileNumber),
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          // 刻度
          axisTick: {
            show: false
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 50,
            end: 60,
            minValueSpan: 5,
            // maxValueSpan: 5,
            zoomLock: false
          }
        ],
        series: [
          {
            type: 'bar',
            barGap: 0,
            data: this.stakeStepStatisData.map(item => item.currentStep),
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: 'rgba(81, 202, 216, 1)' },
                  { offset: 1, color: 'rgba(81, 202, 216, 0.3)' }
                ]
              )
            }
          }
        ]
      };
    }
  },
  created() {
    this.getStakeList();
    this.getFloorList();
    this.getStakeStatis();
    this.getStakeStepStatis();
    this.$message.warning('该功能正在开发中！');
  },
  components: {
    stepModal,
    Breadcrumb,
    echartsBase
  },
  methods: {
    // 获取桩号列表
    async getStakeList() {
      this.tableLoading = true;
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        projectId: this.projectId
      };
      if (this.hasSearch) {
        params.floor = this.floor;
        params.stake = this.stake;
      }
      const { success, data: { data }} = await this.$Model.getStakeList(params);
      this.tableLoading = false;
      if (success && data) {
        this.total = data.total || 0;
        this.tableData = data.list || [];
      }
    },
    // 获取楼层集合
    async getFloorList() {
      const { success, data: { data }} = await this.$Model.getFloorList({
        projectId: this.projectId
      });
      if (success && Array.isArray(data)) {
        this.floorList = data;
      }
    },
    // 统计桩号完成情况
    async getStakeStatis() {
      const { success, data: { data }} = await this.$Model.getStakeStatis({
        projectId: this.projectId
      });
      if (success && data) {
        this.stakeStatisData = data;
      }
    },
    // 统计桩号步骤情况
    async getStakeStepStatis() {
      const { success, data: { data }} = await this.$Model.getStakeStepStatis({
        projectId: this.projectId
      });
      if (success && Array.isArray(data)) {
        this.stakeStepStatisData = data;
      }
    },
    // 搜索
    handleSearch() {
      this.hasSearch = Boolean(this.floor || this.stake);
      this.clear();
      this.getStakeList();
    },
    // 重置
    handleRefresh() {
      this.clear();
      this.hasSearch = false;
      this.floor = '';
      this.stake = '';
      this.getStakeList();
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    /**
     * 设置桩号状态
     * @param {Object} row
     */
    setCurrentData(row) {
      const result = {
        status: '',
        imgUrl: '',
        imgList: [],
        current: {}
      };
      const { steps = [], currentStep, totalStep } = row;
      const current = steps[currentStep - 1] || {};
      const { title, process } = current;
      result.current = current;
      result.status = Number(totalStep) === Number(currentStep)
        ? '已闭环'
        : title || '';
      result.imgList = process && process[0] && process[0].img || [];
      result.imgList = result.imgList.map(item => {
        return /^http(s?)/.test(item)
          ? item
          : this.$configs.ossUrl + item;
      });
      result.imgUrl = /^http(s?)/.test(result.imgList[0])
        ? result.imgList[0]
        : this.$configs.ossUrl + result.imgList[0];
      return result;
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getStakeList();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getStakeList();
    },
    /**
     * 查看步骤详情
     * @param row {Object}
     */
    handleLook(row) {
      this.stepData = { ...row };
      this.visible = true;
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/table";

  .quality-management-page {
    > main {
      width: 100%;
      height:calc(100% - 40px);
      display: flex;
      justify-content: space-between;
      background-color: $baseBg;
      padding: 20px;
      .container {
        width: 49.5%;
        height: 100%;
      }
      .table-container {
        background: $mainBg;
        border-radius: 15px;
        .search-container {
          width: 100%;
          height: 100px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          .search-content {
            flex: 1;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .search-item {
              width: 300px;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 0 20px;
              label {
                width: 80px;
              }
            }
          }
          .btns {
            width: 100px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .table-content {
          width: 100%;
          height: calc(100% - 140px);
          /deep/ .el-table__body-wrapper {
            height: 100%;
            padding-bottom: 46px;
            overflow-y: auto;
          }
          .table-img {
            width: 100px;
            height: 80px;
          }
        }
      }
      .echarts-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .echarts-top {
          width: 100%;
          height: 38%;
          background: $mainBg;
          border-radius: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .echarts-item {
            width: 50%;
            height: 100%;
          }
        }
        .echarts-bottom {
          height: 60%;
          width: 100%;
          background: $mainBg;
          border-radius: 15px;
        }
      }
    }
  }
</style>
